<template>
  <div class="tab_home">
    <div class="tal_class_searchBox">
      <van-search shape="round" placeholder="点击前往搜索" @click="$router.push({ name: 'search' })" />
      <div class="tal_class_searchMask"></div>
    </div>
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(banner, index) in shopInfos.banner" :key="index">
        <img :src="banner.pic" style="height:50vw" />
      </van-swipe-item>
    </van-swipe>
    <!--导航栏-->
    <van-grid class="menu-header" :border="false" clickable :column-num="5">
      <van-grid-item v-for="(circle,index) of shopInfos.goodsType" :key="index" @click="goCategory(circle.id)">
        <circle-goods-type :picUrl="circle.icon" :title="circle.name" />
      </van-grid-item>
    </van-grid>
    <!--热门人气推荐-->
    <van-panel>
      <van-card v-for="(groupGood ,index) in shopInfos.surggest" :key="index" :title="groupGood.name" :desc="groupGood.subTitle" :origin-price="groupGood.price" :price="groupGood.price" :thumb="groupGood.headPic" @click="goDetail(groupGood.id)"></van-card>
      <div slot="header">
        <van-cell-group>
          <van-cell title="人气推荐">
            <!-- isLink -->
            <!-- <router-link to="/items/hot" class="text-desc">人气推荐</router-link> -->
          </van-cell>
        </van-cell-group>
      </div>
    </van-panel>

    <!--一般推荐-->
    <van-grid clickable :column-num="2" class="goods-grid-list">
      <van-grid-item v-for="(sqrGood,index) of shopInfos.someSugGoods" :key="index">
        <sqr-goods-card :picUrl="sqrGood.headPic" :model="sqrGood.weight+sqrGood.unit" :price="sqrGood.price" :title="sqrGood.name" @picClick="goDetail(sqrGood.id)" @cartClick="showSku(sqrGood)" />
      </van-grid-item>
    </van-grid>
    <van-sku v-model="skuShow" :sku="sku" :goods="goods" :goods-id="goodsId" :quota="quota" :quota-used="quotaUsed" :hide-stock="sku.hide_stock" :message-config="messageConfig" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" :close-on-click-overlay="true" />
    <van-dialog v-model="showWp" title="关注公众号有好礼" show-cancel-button>
      <img style="width: 90%" src="http://www.spwhq.com/upload/code2.jpg">
    </van-dialog>
  </div>
</template>

<script>
import { getHome, getPushProduct, goodsCategory, catalogList, couponReceive, cartAdd, wxShareConfig, userFocus } from '@/api/api';
import scrollFixed from '@/mixin/scroll-fixed';
import { setLocalStorage } from '@/utils/local-storage';
import goodsType from './test_goodType.png';
import wx from 'weixin-js-sdk'

import circleGoodsType from '@/components/goodsType/circle';
import sqrGoodsCard from '@/components/goodsCard';
import {
  List,
  Swipe,
  SwipeItem,
  Tabbar,
  TabbarItem,
  Search,
  Panel,
  CouponCell,
  CouponList,
  Toast,
  Card,
  Dialog,
  Grid,
  GridItem,
  Row,
  Col,
  Tag,
  Sku
} from 'vant';

export default {
  mixins: [scrollFixed],
  data () {
    return {
      showWp: false,
      shareConfig: {},
      bannerRequest: {
        addressType: 1,
        status: 1,
        delFlag: 0
      },
      pushSimpleRequest: {
        type: 1,
        addressType: 1,
        pageNo: 1,
        pageSize: 8
      },
      pushSpecialRequest: {
        type: 2,
        addressType: 1,
        pageNo: 1,
        pageSize: 1
      },
      skuShow: false,
      goodsId: '1215',
      goodsPrice: 0,
      sku: {
        tree: [
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
        ],
        price: '1.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2259, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false // 是否隐藏剩余库存
      },
      messageConfig: {

      },
      goods: {
        title: '测试商品',
        picture: 'https://img.yzcdn.cn/1.jpg'
      },
      quota: 0, // 限购买数  0--不限购
      quotaUsed: 0, // 已购买数
      shopInfos: {
        banner: [],  //滚定广告栏
        someSugGoods: [],  //一般推荐商品
        surggest: [
          {
            name: '测试数据',
            brief: '描述描述描述描述描述',
            counterPrice: 20,
            retailPrice: 12.99,
            picUrl: goodsType
          }
        ],
        goodsType: []   //商品类型

      },
      isLoading: false
    };
  },

  created () {
    this.initViews();
  },
  activated () {
    this.initShare();
  },

  methods: {
    initShare () {
      var This = this;
      var currentUrl = window.location.href;
      wxShareConfig({ url: currentUrl }).then(res => {
        var config = res.data.result;
        This.shareConfig = config;
        wx.config({
          beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
          appId: config.appId, // 必填，企业微信的corpID
          timestamp: config.timestamp, // 必填，生成签名的时间戳
          nonceStr: config.nonceStr, // 必填，生成签名的随机串 必填，生成签名的随机串
          signature: config.signature, // 必填，签名
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
        });
        wx.ready(function () {
          wx.onMenuShareAppMessage({
            title: '万货全商城-绿色商城', // 分享标题
            desc: '好吃健康的绿色商城', // 分享描述
            link: This.shareConfig.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.spwhq.com/upload/p/p1.jpg', // 分享图标(不能赋相对路径，一定要是绝对路径)
            success: () => {
            }
          });
          wx.onMenuShareTimeline({
            title: '万货全商城-绿色商城', // 分享标题
            desc: '好吃健康的绿色商城', // 分享描述
            link: This.shareConfig.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.spwhq.com/upload/p/p1.jpg', // 分享图标(不能赋相对路径，一定要是绝对路径)
            success: () => {
            }
          });
        });
      });

    },

    goDetail (id) {
      this.$router.push(`/items/detail/${id}`);
    },
    goCategory (id) {
      this.$router.push(`/category/${id}`);
    },
    showSku (comment) {
      this.skuShow = true;
      this.goodsId = comment.id;
      this.goodsPrice = comment.price;
      this.goods.title = comment.name;
      this.goods.picture = comment.headPic;
      this.sku.price = comment.price;
      this.sku.stock_num = 9999;
    },
    changeTabbar (o) {
      goodsCategory({ id: o.id }).then(res => {
        let categoryId = res.data.data.currentCategory.id;
        this.$router.replace({
          name: 'category',
          query: { itemClass: categoryId }
        });
      });
    },
    initViews () {
      var That = this;
      getHome(this.bannerRequest).then(res => {
        this.shopInfos.banner = res.data.result;
      });
      getPushProduct(this.pushSimpleRequest).then(res => {
        this.shopInfos.someSugGoods = res.data.result.records;
      });
      getPushProduct(this.pushSpecialRequest).then(res => {
        this.shopInfos.surggest = res.data.result.records;
      });
      catalogList().then(res => {
        this.shopInfos.goodsType = res.data.result;
        if(this.shopInfos.goodsType.length>0){
          userFocus().then(res => {
            console.log(res.data.result, "userFocus");
            var result = res.data.result;
            if (typeof (result.groupId) == 'undefined' || result.groupId == undefined) {
              That.showWp = true;
            }
          });
        }

      });

    },
    onBuyClicked (skuData) {
      setLocalStorage({ submitProductIds: skuData.goodsId, submitQuantity: skuData.selectedNum });
      this.$router.push('/order/checkout');
    },
    onAddCartClicked (skuData) {
      var This = this;
      const addCar = {};
      addCar.productId = this.goodsId;
      addCar.quantity = skuData.selectedNum;
      addCar.addPrice = this.goodsPrice;
      cartAdd(addCar).then(res => {
        Toast.success('添加成功');
        This.skuShow = false;
      });

    }
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Card.name]: Card,
    [Dialog.name]: Dialog,
    [Dialog.Component.name]: Dialog.Component,
    [Toast.name]: Toast,
    [CouponCell.name]: CouponCell,
    [CouponList.name]: CouponList,
    [Search.name]: Search,
    [Panel.name]: Panel,
    [List.name]: List,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Tag.name]: Tag,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Sku.name]: Sku,
    circleGoodsType,
    sqrGoodsCard
  }
};
</script>


<style lang="scss" >
.interval_bot {
  margin-bottom: 10px;
}
.goods-grid-list .title{
  height:32px;
}
.van-panel {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 8px;
  margin-right: 8px;
}
.menu-header {
  .van-grid-item__content {
    background-color: #f2f2f2;
    border: none;
  }
}
.van-hairline--top {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 8px;
  margin-right: 8px;
}
.goods-channel {
  background: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 0px;
  padding-top: 10px;
}

.goods-channel .item {
  width: 50px;
  height: 50px;
  margin-left: 10px;
}

.goods-channel img {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

.goods-channel span {
  display: block;
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #333;
}
.van-coupon-cell--selected {
  color: #323233;
}
.van-coupon-list {
  height: 100%;
  position: relative;
  background-color: #f8f8f8;
}
.van-coupon-list__field {
  padding: 7px 15px;
}
.van-coupon-list__exchange {
  height: 32px;
  line-height: 30px;
}
.van-coupon-list__list {
  overflow-y: auto;
  padding: 15px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.van-coupon-list__close {
  left: 0;
  bottom: 0;
  position: absolute;
  font-weight: 500;
}
.van-coupon-list__empty {
  padding-top: 100px;
  text-align: center;
}
.van-coupon-list__empty p {
  color: #969799;
  margin: 15px 0;
  font-size: 14px;
  line-height: 20px;
}
.van-coupon-list__empty img {
  width: 80px;
  height: 84px;
}
.van-coupon-item {
  overflow: hidden;
  border-radius: 4px;
  margin: 0 15px 15px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.van-coupon-item:active {
  background-color: #e8e8e8;
}
.van-coupon-item__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100px;
  padding: 24px 0 0 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid red;
}
.van-coupon-item h2,
.van-coupon-item p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.van-coupon-item h2 {
  height: 34px;
  font-weight: 500;
  line-height: 34px;
}
.van-coupon-item p {
  font-size: 12px;
  line-height: 16px;
  color: #969799;
}
.van-coupon-item__head {
  min-width: 90px;
}
.van-coupon-item__head h2 {
  color: #f44;
  font-size: 24px;
}
.van-coupon-item__head h2 span {
  font-size: 50%;
}
.van-coupon-item__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  border-radius: 0 4px 4px 0;
}
.van-coupon-item__body h2 {
  font-size: 16px;
}
.van-coupon-item__corner {
  top: 16px;
  right: 15px;
  position: absolute;
}
.van-coupon-item__corner .van-icon {
  border-color: #f44;
  background-color: #f44;
}
.van-coupon-item__reason {
  padding: 7px 15px;
  border-top: 1px dashed #ebedf0;
  background-color: #fafafa;
}
.van-coupon-item--disabled:active {
  background-color: #fff;
}
.van-coupon-item--disabled .van-coupon-item__content {
  height: 90px;
}
.van-coupon-item--disabled h2,
.van-coupon-item--disabled p,
.van-coupon-item--disabled span {
  color: #969799;
}
</style>
